<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>回收日志</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../css/mui.picker.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/mui.poppicker.css" />
    <link rel="stylesheet" href="../css/mui.dtpicker.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        background-color: #fff;
      }
      
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      /**/
      
      .select-all {
        margin-top: 5px;
        text-indent: 5px;
      }
      
      .select {
        width: 80%;
        margin-left: 5%;
        border: 1px solid #C0C0C0;
        border-radius: 3px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        position: relative;
      }
      
      .start-time,
      .end-time {
        border: 1px solid #C0C0C0;
        border-radius: 3px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        position: relative;
        width: 40%;
      }
      
      .start-time {
        margin-left: 5%;
      }
      
      .select-time {
        flex: 5;
      }
      
      .mui-icon-arrowdown {
        font-size: 14px;
        position: absolute;
        right: 5px;
        top: 5px;
      }
      /**/
      
      .mui-scroll-wrapper {
        top: 40px;
        bottom: 2px;
      }
      
      .flex {
        display: flex;
      }
      
      .user-each {
        padding: 5px 5px;
        position: relative;
      }
      
      .img-box {
        flex: 2;
      }
      
      .img-box img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
        text-align: center;
      }
      
      .user-info-box {
        flex: 4;
        font-size: 13px;
        line-height: 24px;
      }
      
      .user-info-box div {
        margin-left: 5px;
      }
      
      .user-op-box {
        flex: 2;
        position: relative;
        height: 100%;
      }
      
      .recovery-num {
        position: absolute;
        right: 20px;
        font-size: 13px;
      }
      
      .choose-btn {
        width: 70%;
        position: absolute;
        bottom: -60px;
        right: 5px;
        text-align: center;
        font-size: 12px;
         background-color: #FF9800;
      	border-color: #FF9800;
      	color: #fff;
      }
      .choose-btn:active{
       	background-color: #e6c697;
       }
      /*加载*/
      
      .mui-pull-bottom-pocket {
        visibility: visible;
      }
      
      .mui-pull-bottom-pocket .mui-pull-loading {
        visibility: visible;
      }
      /**/
      
      .no {
        text-align: center;
        font-size: 14px;
        line-height: 30px;
      }
      .bgGray{
      	background-color: #F8F8F8;
      }
    </style>
  </head>

  <body>
    <div class="mui-content">
      <div class="flex select-all">
        <div class="select-time">
          <div class="flex">
            <div class="start-time">
              <!--2017-12-1-->
            </div>
            <span style="display: inline-flex;font-size:13px;margin-right: 2%;">至</span>
            <div class="end-time">
              <!--2017-12-22-->
            </div>
          </div>
        </div>
      </div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="userList ">

          </ul>
          <!--加载中-->
          <div class="mui-pull-bottom-pocket">
            <div class="mui-pull">
            </div>
          </div>
          <!--加载中-->
        </div>
        <script id="pageList" type="text/html">
          <%if(list.length>0){%>
          <%for(var i=0;i<list.length;i++){%>
          	<%if(i%2===0){%>
          		<li class="user-each">
          		<%} else {%>
          			<li class="user-each bgGray">
          			<%}%>
            <div class="flex">
              <div class="img-box">
                <img src="<%=imgPath+list[i].header%>" alt="" />
              </div>
              <div class="user-info-box">
                <div class="user-name">
                  <%if(list[i].userName){%>
                  <%=list[i].userName%>
                  <%}else{%> --
                  <%}%>
                </div>
                <div class="user-id">ID：
                  <%=list[i].userId%>
                </div>
                <div class="user-num">时间：
                  <%=list[i].recyclingDate%>
                </div>
              </div>
              <div class="user-op-box">
                <button type="button" data-index="<%=i%>" class="detail-choose-btn mui-btn choose-btn">详情</button>
              </div>
            </div>
          </li>
          <%}%>
          <%} else {%>
          <p class="no">暂无数据</p>
          <%}%>
        </script>

      </div>
    </div>
    <script src="../config.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/template-native.js"></script>
    <script src="../js/mui.picker.js"></script>
    <script src="../js/mui.poppicker.js"></script>
    <script type="text/javascript" src="../js/mui.dtpicker.js"></script>
    <script type="text/javascript">
      mui.init()
      var storeId = '',
        pageNo = 1,
        fromTime = new Date().format('yyyy-MM') + '-01',
        toTime = new Date().format('yyyy-MM-dd'),
        pageCount = 10,
        pageList = [],
        isLoading = false,
        pageTotal = 1
        
				document.querySelector(".start-time").innerText = fromTime
        document.querySelector(".end-time").innerText = toTime
        
      mui.plusReady(function() {
        receiveParams()
        loadData()
        scroll()
        bindEvent()
        setPicker()
      })
      //          //滚动监听
      document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function(e) {
        if(e.detail.y <= e.detail.maxScrollY) {
          if(isLoading === false) {
            if(++pageNo <= pageTotal) {
              loadData()
            } else {
              setLoading(2)
            }
          }
        }
      });

      function setPicker() {
        //起始时间
        var options = {
          'type': 'date'
        }
        var startTimePicker = new mui.DtPicker(options)
        var startTime = document.querySelector(".start-time")
        startTime.addEventListener('tap', function() {
          startTimePicker.show(function(item) {
            startTime.innerText = item.text
            fromTime = item.text
            pageNo = 1
            pageList = []
            mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
            loadData()
          })
        })
        //结束时间
        var endTimePicker = new mui.DtPicker({
          'type': 'date'
        })
        var endTime = document.querySelector(".end-time")
        endTime.addEventListener('tap', function() {
          endTimePicker.show(function(item) {
            endTime.innerText = item.text
            toTime = item.text
            pageNo = 1
            pageList = []
            mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
            loadData()
          })
        })
      }

      function receiveParams() {
        var self = plus.webview.currentWebview()
        this.currentShopObj = self.currentShopObj;
        this.storeId = self.currentShopObj.storeId
      }

      function scroll() {
        mui('.mui-scroll-wrapper').scroll({
          deceleration: 0.0005,
          brounce: true,
          scrollY: true
        });
      }
      //设置加载状态
      function setLoading(type) {
        switch(type) {
          case 1:
            document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-loading mui-icon mui-spinner"></div>\
						<div class="mui-pull-caption">正在加载</div>'
            break
          case 2:
            document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-caption">没有更多</div>'
            break
          case 0:
            document.querySelector(".mui-pull").innerHTML = ''
            break
        }
      }

      function loadData() {
        isLading = true
        setLoading(1)
        if(fromTime && toTime) {
          if(new Date(fromTime).getTime() > new Date(toTime).getTime()) {
            var startTime = toTime
            var endTime = fromTime
          } else {
            var startTime = fromTime
            var endTime = toTime
          }
        }
        config.ajax({
          url: '/recyclingLog/check',
          data: {
            storeId: storeId,
            fromTime: new Date(startTime + ' 00:00:00').getTime(),
            toTime: new Date(endTime + ' 23:59:59').getTime(),
            pageNo: pageNo,
            pageCount: 10,
          },
          success: function(res) {
            if(res.result === 1) {
            	console.log(JSON.stringify(res))
              pageTotal = res.data.pageTatol
              if(pageNo === 1) {
                pageList = res.data.data
                setPage()
              } else {
                res.data.data.forEach(function(item) {
                  pageList.push(item)
                })
                setPage()
              }
            } else {
              mui.toast(res.errormsg)
            }
            setTimeout(function() {
              setLoading(0)
              isLoading = false
            }, 1000)
          }
        })
      }

      function setPage() {
        var html = template('pageList', {
          list: pageList,
          imgPath: config.imgPath
        })
        mui('.userList')[0].innerHTML = html
      }

      function bindEvent() {
        mui('.userList').on('tap', '.detail-choose-btn', function(e) {
          var index = this.getAttribute('data-index')
          var info = pageList[index]
          var title = '日志'
          mui.openWindow({
            url: './exchange-detail.html',
            id: 'exchange-detail',
            styles: {
              top: 0, //新页面顶部位置
              bottom: 0, //新页面底部位置         
              titleNView: {
                titleText: title,
                titleColor: "#FFFFFF",
                titleSize: "17px",
                backgroundColor: "#FF6800",
                autoBackButton: true,
                //                homeButton: true,
                buttons: [{
                  float: "right",
                  fontSize: "18px",
                  fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                  text: "\ue602",
                  onclick: function() {
                    var allPage = plus.webview.all()
                    var nowPage = plus.webview.getWebviewById('index')
                    for(var i = 0; i < allPage.length; i++) {
                      if(allPage[i].getURL() !== nowPage.getURL()) {
                        plus.webview.close(allPage[i]);
                      }
                    }
                  }
                }],
                splitLine: {
                  color: "#CCCCCC",
                  height: "1px"
                }
              }
            },
            extras: {
              currentShopObj: currentShopObj,
              info: info
            }
          })
        })
      }
      //
    </script>
  </body>

</html>